<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/structAdmin.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">

        <h:form id="form">

            <p:commandButton   value="Ayuda" styleClass=" btnhelp" onclick="dlgm.show();" type="button" /> 
            <p:panel header="Gestionar Mascota" id="pMascota" style="border: 0">

                <p:messages id="msgs" globalOnly="true" closable="true" />

                <p:panel header="Cliente" id="pCliente" style="margin-bottom: 20px;margin-top: 20px;">
                    <h:panelGrid columns="4" cellpadding="5" >
                        <h:outputText  value="Nombre:"/>
                        <p:inputText id="cliente" rendered="true" value="#{mascotaBean.mascota.cedCliente}" disabled="true" />  

                        <p:commandButton id="buscar-cliente" styleClass="buttonMain" onclick="dlg.show();" style="font-size: 12px" value="Buscar" icon="ui-icon-search" />  
                        <p:commandButton id="calcelar-cliente" styleClass="buttonSecundary" update=":form:pCliente" ajax="true" process="@this" style="font-size: 12px" value="Cancelar" icon="ui-icon-cancel" actionListener="#{mascotaBean.cancelSelection()}" />
                    </h:panelGrid>
                </p:panel>

                <p:panel id="pIPersonal" header="Información Personal" style="margin: 20px 0px 5px 0px;" >
                    <h:panelGrid columns="4" cellpadding="5"  >

                        <h:outputText  value="Nombre: *"  />
                        <p:inputText id="nombre" requiredMessage="No puedes dejar este campo en blanco."  label="nombre" value="#{mascotaBean.mascota.nombre}" required="true" />

                        <h:outputText value="Fecha de nacimiento: *" />
                        <p:calendar requiredMessage="No puedes dejar este campo en blanco."  id="fecha" label="fecha" value="#{mascotaBean.mascota.fechaNacimiento}" maxdate="#{mascotaBean.currentDate}" pattern="dd-MM-yyyy" required="true" />

                        <h:outputText value="Especie: *" />
                        <p:selectOneMenu id="especie"  value="#{mascotaBean.especie}" label="especie" requiredMessage="No puedes dejar este campo sin selección." converter="EspecieConvertor" required="true" >
                            <f:ajax render="raza" />
                            <f:selectItem itemLabel="Seleccione..."  value="#{null}" />
                            <f:selectItems value="#{especieBean.obtenerEspecies()}" />
                        </p:selectOneMenu> 

                        <h:outputText value="Raza: *" />
                        <p:selectOneMenu id="raza"  rendered="true" value="#{mascotaBean.mascota.codRaza}" label="raza" requiredMessage="No puedes dejar este campo sin selección." converter="RazaConvertor"  >
                            <f:selectItem itemLabel="Seleccione..." value="#{null}" />
                            <f:selectItems value="#{mascotaBean.especie.razaList}" />
                        </p:selectOneMenu> 

                        <h:outputText value="Sexo: *" />
                        <p:selectOneMenu id="sexo"  rendered="true" value="#{mascotaBean.mascota.sexo}" label="sexo" requiredMessage="No puedes dejar este campo sin selección." required="true" >
                            <f:selectItem itemLabel="Seleccione..." itemValue="" />
                            <f:selectItems value="#{mascotaBean.sexos()}" />
                        </p:selectOneMenu> 

                    </h:panelGrid> 
                </p:panel>

                <p:commandButton styleClass="buttonMain" actionListener="#{mascotaBean.saveAction()}" style="margin: 0px 15px 0px 0px;" value="Guardar" icon="ui-icon-disk" update="@form" />
                <p:commandButton value="Cancelar" styleClass="buttonSecundary" actionListener="#{mascotaBean.cancelAction()}" ajax="true" process="@this" update=":form:pMascota" icon="ui-icon-close"  />


                <p:dataTable id="dataTable" var="mascota" style="margin: 20px 0px 5px 0px;" 
                             value="#{mascotaBean.mascotas()}"  
                             paginator="true" rows="15"  
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             rowsPerPageTemplate="5,10,15" 
                             paginatorPosition="bottom">  

                    <f:facet name="header">  
                        Mascotas Registradas
                    </f:facet>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Nombre" />  
                        </f:facet>  
                        <h:outputText value="#{mascota.nombre}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Fecha de nacimiento" />  
                        </f:facet>  
                        <h:outputText value="#{mascota.fechaFormateada()}" />  
                    </p:column> 

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Sexo" />  
                        </f:facet>  
                        <h:outputText value="#{mascota.sexo}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Raza" />  
                        </f:facet>  
                        <h:outputText value="#{mascota.codRaza}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Cliente" />  
                        </f:facet>  
                        <h:outputText value="#{mascota.cedCliente}" />  
                    </p:column>  

                    <p:column headerText="Acción" >
                        <div id="edit-delete"> 
                            <p:commandLink title="Editar" styleClass="action-edit"  ajax="true" action="#{mascotaBean.setStored(true)}"  process="@this" update=":form:pMascota" >
                                <f:setPropertyActionListener value="#{mascota}" target="#{mascotaBean.mascota}" />
                                <f:setPropertyActionListener value="#{mascota.codRaza.codEspecies}" target="#{mascotaBean.especie}" />
                                <h:graphicImage url="../../resources/images/edit-icon.png" styleClass="icon" />
                            </p:commandLink>

                            <p:commandLink title="Eliminar" ajax="true" actionListener="#{mascotaBean.removeAction(mascota)}"  process="@this" update=":form:msgs,dataTable" >
                                <h:graphicImage url="../../resources/images/delete-icon.png" styleClass="icon" />
                            </p:commandLink>
                        </div>
                    </p:column>

                </p:dataTable>  
            </p:panel>

            <p:dialog id="dialog" header="Ayuda" widgetVar="dlgm" draggable="false" closable="true" appendToBody="true" visible="false" modal="true" showEffect="fade" hideEffect="fade"  resizable="false">  

                <h:form>
                    <h:panelGrid columns="2">

                        <p style="text-align: justify">
                            * Para completar exitosamente el registro de mascota usted debe seleccionar un Cliente previamente ingresado. <br />Si no lo ha realizado presione clic en el panel lateral Gestionar Cliente.
                            <br />
                            * A continuación ingrese los datos necesarios para la creación de una mascota (en este caso todos) y seleccione la opción Guardar o Cancelar.
                            <br />
                            * Si selecciona la opción guardar y los datos son correctos se guardara exitosamente la mascota y se mostrara en pantalla
                            <br />
                            * Si selecciona la opción cancelar se borraran los datos anteriormente ingresados
                        </p>
                    </h:panelGrid>
                    <br/> 

                    <p:commandButton value="Aceptar" styleClass="buttonMain"  oncomplete="dlgm.hide();" />
                </h:form>

            </p:dialog>
        </h:form>  



        <p:dialog header="Cliente" widgetVar="dlg" resizable="false" modal="true" appendToBody="true" >
            <h:form id="formDialog">

                <p:dataTable emptyMessage="No se encontraron registros." style="margin-bottom: 5px;margin-top: 10px;" 
                             id="cTable" 
                             var="cliente" 
                             value="#{clienteBean.obtenerClientes()}" 
                             paginator="true" 
                             rows="10"  
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             rowsPerPageTemplate="5,10,15"
                             paginatorPosition="bottom"
                             selectionMode="single"
                             selection="#{mascotaBean.mascota.cedCliente}"
                             rowKey="#{cliente.cedula}">

                    <f:facet name="header">  
                        Clientes registrados
                    </f:facet> 

                    <p:ajax event="rowSelect" update=":form:cliente" />  

                    <p:column headerText="Identificación" filterBy="#{cliente.cedula}">   
                        <h:outputText value="#{cliente.cedula}" />  
                    </p:column>  

                    <p:column headerText="Nombre" filterBy="#{cliente.nombre}">   
                        <h:outputText value="#{cliente.nombre}"  />  
                    </p:column>  

                    <p:column headerText="Apellido" filterBy="#{cliente.apellido}" >  
                        <h:outputText value="#{cliente.apellido}" />  
                    </p:column> 

                    <p:column headerText="Email" filterBy="#{cliente.email}">  
                        <h:outputText value="#{cliente.email}" />  
                    </p:column> 

                    <p:column headerText="Dirección" filterBy="#{cliente.direccion}">  
                        <h:outputText value="#{cliente.direccion}" />  
                    </p:column> 

                    <p:column headerText="Fijo" filterBy="#{cliente.fijo}">  
                        <h:outputText value="#{cliente.fijo}" />  
                    </p:column> 

                    <p:column headerText="Celular" filterBy="#{cliente.celular}">  
                        <h:outputText value="#{cliente.celular}" />  
                    </p:column>  

                    <p:column headerText="Puntos" filterBy="#{cliente.cantidadpuntos}">  
                        <h:outputText value="#{cliente.cantidadpuntos}" />  
                    </p:column> 

                    <p:column headerText="Ciudad" filterBy="#{cliente.codCiudad}">  
                        <h:outputText value="#{cliente.codCiudad}" />  
                    </p:column> 

                </p:dataTable>

                <p:commandButton value="Aceptar"  styleClass="buttonMain" update=":form:cliente" oncomplete="dlg.hide();" />

            </h:form>

        </p:dialog>


    </ui:define>
</ui:composition>
